<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日期时间转换器</title>
    <link rel="icon" type="image/svg+xml" href="favicon.svg">
    <link rel="stylesheet" href="common.css">
    <script>
        // 防止主题闪烁 - 在页面渲染前应用主题
        (function() {
            const theme = localStorage.getItem('global-theme') || 'dark';
            if (theme === 'dark') {
                document.documentElement.classList.add('dark-theme');
            }
        })();
    </script>
    <style>
        .converter-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 30px;
        }

        .converter-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .converter-header h1 {
            font-size: 32px;
            color: var(--text-primary);
            margin-bottom: 10px;
        }

        .converter-header p {
            color: var(--text-secondary);
            font-size: 14px;
        }

        .input-section {
            display: flex;
            gap: 15px;
            margin-bottom: 40px;
        }

        .input-wrapper {
            flex: 1;
            position: relative;
        }

        .input-section input {
            width: 100%;
            padding: 15px 45px 15px 15px;
            font-size: 16px;
            border: 2px solid var(--border-color);
            border-radius: 8px;
            background: var(--bg-primary);
            color: var(--text-primary);
        }

        .clear-btn {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            width: 30px;
            height: 30px;
            border: none;
            background: transparent;
            color: #95a5a6;
            font-size: 20px;
            cursor: pointer;
            display: none;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }

        .clear-btn:hover {
            background: #ecf0f1;
            color: #7f8c8d;
        }

        .clear-btn.show {
            display: flex;
        }

        .input-section select {
            width: 200px;
            padding: 15px;
            font-size: 16px;
            border: 2px solid var(--border-color);
            border-radius: 8px;
            background: var(--bg-primary);
            color: var(--text-primary);
        }

        .results-container {
            background: var(--bg-primary);
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .result-item {
            display: flex;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid #ecf0f1;
        }

        .result-item:last-child {
            border-bottom: none;
        }

        .result-label {
            width: 180px;
            font-weight: 600;
            color: var(--text-secondary);
            font-size: 14px;
        }

        .result-value {
            flex: 1;
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 15px;
            color: var(--text-primary);
        }

        .copy-btn {
            padding: 6px 12px;
            background: transparent;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            cursor: pointer;
            color: var(--text-secondary);
            transition: all 0.2s;
            font-size: 12px;
        }

        .copy-btn:hover {
            background: var(--bg-tertiary);
            border-color: var(--text-secondary);
        }

        .copy-btn.copied {
            background: #27ae60;
            color: white;
            border-color: #27ae60;
        }
    </style>
</head>
<body>
    <div style="display: flex; height: 100vh;">
        <div class="sidebar">
            <div class="sidebar-header">
                <h2>工具库</h2>
                <button class="theme-toggle-btn" id="globalThemeToggle" title="切换主题" aria-label="切换浅色/深色主题">
                    <span class="theme-icon">🌓</span>
                </button>
            </div>
            <div class="sidebar-item" onclick="location.href='index.html'">JSON 格式化</div>
            <div class="sidebar-item" onclick="location.href='json-comparator.html'">JSON 对比</div>
            <div class="sidebar-item" onclick="location.href='text-comparator.html'">文本对比</div>
            <div class="sidebar-item" onclick="location.href='url-codec.html'">URL 编解码</div>
            <div class="sidebar-item" onclick="location.href='text-decoder.html'">文本解码</div>
            <div class="sidebar-item active" onclick="location.href='datetime-converter.html'">日期时间转换</div>
            <div class="sidebar-item" onclick="location.href='md5-hash.html'">加解密</div>
            <div class="sidebar-item" onclick="location.href='ck-extractor.html'">CK 提取</div>
            <div style="margin-top: auto; padding: 15px 20px; font-size: 12px; color: var(--text-secondary); border-top: 1px solid var(--border-color); text-align: center;">
                版本: v1.0.0
            </div>
        </div>
        <div class="main-content" style="overflow: auto; background: var(--bg-secondary);">
            <div class="converter-container">
                <div class="converter-header">
                    <h1>📅 日期时间转换器</h1>
                    <p>将日期和时间转换为各种不同的格式</p>
                </div>

                <div class="input-section">
                    <div class="input-wrapper">
                        <input type="text" id="date-input" placeholder="输入日期字符串或时间戳...">
                        <button class="clear-btn" id="clear-btn" onclick="clearInput()">×</button>
                    </div>
                    <select id="input-type">
                        <option value="auto">自动识别</option>
                        <option value="timestamp">时间戳（毫秒）</option>
                        <option value="timestamp-sec">时间戳（秒）</option>
                        <option value="iso">ISO 8601</option>
                        <option value="date-string">日期字符串</option>
                    </select>
                </div>

                <div class="results-container" id="results"></div>
            </div>
        </div>
    </div>
    <script src="theme-toggle.js"></script>
    <script src="datetime-converter.js"></script>
</body>
</html>
